<template>
  <view class="personalData_wrapper">
    <view class="head_wrapper">
      <view class="left_">头像</view>
      <view class="right_">
        <button
          type="balanced"
          open-type="chooseAvatar"
          @chooseavatar="onChooseavatar"
        >
          <view>
            <image :src="avatarUrl" class="refreshIcon"></image>
          </view>
          <image src="/static/orderDetails/1.png"></image>
        </button>
      </view>
    </view>
    <view class="info_wrapper">
      <view class="item_wrapper">
        <view>昵称</view>
        <text>{{ userInfoServer.nickName }}</text>
      </view>
      <view class="item_wrapper">
        <view>ID</view>
        <text>{{ userInfoServer.userId }}</text>
      </view>
      <view class="item_wrapper">
        <view>当前等级</view>
        <text>{{
          userInfoServer.roleId === 1
            ? "联创"
            : userInfoServer.roleId === 2
            ? "合伙人"
            : userInfoServer.roleId === 3
            ? "服务商"
            : userInfoServer.roleId === 4
            ? "店主"
            : userInfoServer.roleId === 5
            ? "普通用户"
            : ""
        }}</text>
      </view>
      <view class="item_wrapper">
        <view>手机号</view>
        <text v-if="phoneNumber">{{ phoneNumber }}</text>
        <button
          v-if="!phoneNumber"
          class="button btn-normal phone_"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
          获取微信手机号
        </button>
      </view>
      <view class="item_wrapper">
        <view>加入时间</view>
        <text>{{
          userInfoServer.createTime
            .toLocaleString()
            .replace(/T/g, " ")
            .replace(/Z/g, "")
        }}</text>
      </view>
      <view class="item_wrapper">
        <view>推荐人ID</view>
        <text>{{ userInfoServer.userId }}</text>
      </view>
    </view>
  </view>
</template>

<script>
// import { getPhone } from "@/api/login/login";

export default {
  name: "index.vue",
  data() {
    return {
      avatarUrl: '',
      nickName: "",
      userInfoServer: uni.getStorageSync("userInfoServer")
        ? uni.getStorageSync("userInfoServer")
        : "",
      phoneNumber: "",
    };
  },
  onShow() {
    this.avatarUrl = uni.getStorageSync("avatarUrl") || "";
    this.userInfoServer = uni.getStorageSync("userInfoServer")
      ? uni.getStorageSync("userInfoServer")
      : "";
    this.phoneNumber = uni.getStorageSync("phoneNumber")
      ? uni.getStorageSync("phoneNumber")
      : "";
  },
  methods: {
    async getPhoneNumber(e) {
      console.log(e.detail.code, "e.detail.code");
      //这里获取code
      if (uni.getStorageSync("token") && e.detail.code) {
        //获取手机号
        const getPhoneData = await getPhone(e.detail.code);
        if (getPhoneData.code === 0) {
          const { phoneNumber } = getPhoneData.data.phone_info;
          this.phoneNumber = phoneNumber;
          uni.setStorageSync("phoneNumber", phoneNumber);
          uni.showToast({
            title: "授权成功",
            icon: "success",
            duration: 2000,
          });
        } else {
          uni.showToast({
            title: "授权失败",
            icon: "error",
            duration: 2000,
          });
        }
      } else {
        uni.showToast({
          title: "请先登录!",
          icon: "error",
          duration: 2000,
        });
      }
    },

    //昵称输入框blur
    bindblur(e) {
      console.log("nickName", e);
      this.nickName = e.detail.value;
    },
    //昵称输入框input
    bindinput(e) {
      console.log("nickName", e);
      this.nickName = e.detail.value;
    },
    //选择头像
    onChooseavatar(e) {
      console.log(e, "呃呃呃");
      console.log(e.detail, "选择头像");
      this.avatarUrl = e.detail.avatarUrl;
      uni.setStorageSync("avatarUrl", e.detail.avatarUrl);
    },
    //保存头像和昵称
    save() {
      console.log("滴滴滴");
      //判断输入数据
      if (this.nickName.length < 2) {
        uni.showToast({
          title: "昵称最少两个字",
          icon: "error",
        });
        return false;
      }

      if (
        this.avatarUrl ==
        "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
      ) {
        uni.showToast({
          title: "请选择头像",
          icon: "error",
        });
        return false;
      }

      //保存到线上
      uni.showLoading({
        title: "加载中",
      });
      uni.uploadFile({
        url: "http://api.lhdtest.com/auth/save",
        filePath: this.avatarUrl,
        name: "file",
        formData: {
          nickname: this.nickName,
        },
        header: {},
        success: (res) => {
          // 注意：这里返回的res.data类型是string  需要自己去转换为JSON
          let data = JSON.parse(res.data);
          if (data.code == 0) {
            //this.avatarUrl = data.data.url;
            uni.showToast({
              title: "保存成功！",
            });
          }
        },
        fail: (error) => {
          uni.showToast({
            title: error,
            duration: 2000,
          });
        },
        complete: () => {
          uni.hideLoading();
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.personalData_wrapper {
  background: #f5f5f5;
  padding: rpx(12);
  > .head_wrapper {
    width: rpx(351);
    height: rpx(50);
    background: #ffffff;
    border-radius: rpx(5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: rpx(7) rpx(12);
    > .left_ {
    }
    > .right_ {
      display: flex;
      align-items: center;
      button {
        display: flex;
        align-items: center;
        view {
          margin-right: rpx(12);
          > image {
            width: rpx(36);
            height: rpx(36);
            border-radius: 50%;
            vertical-align: middle;
          }
        }
        > image {
          width: rpx(16);
          height: rpx(16);
        }
      }
    }
  }
  > .info_wrapper {
    margin-top: rpx(10);
    width: rpx(351);
    background: #ffffff;
    border-radius: rpx(5);
    padding: rpx(0) rpx(12);
    > .item_wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: rpx(15) rpx(0);
      .phone_ {
        display: flex;
        align-items: center;
        justify-content: center;
        width: rpx(110);
        height: rpx(30);
        background: #07c160;
        border-radius: rpx(5);
        font-size: rpx(13);
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}
</style>
